<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>人员详情</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">

</head>
<style>
    .IcoNormal {
        float: left;
        border-bottom: 0px;
        border-left: 0px;
        background-color: transparent;
        width: 16px;
        height: 16px;
        vertical-align: middle;
        border-top: 0px;
        border-right: 0px;
        background-image: url(../../statics/img/upload_normal.gif);
        background-repeat: no-repeat;
        float: left;
    }

    .progressobj {
        height: 20px;
    }

    .progressobj .delfile {
        float: left;
        margin-left: 10px;
    }

</style>
<body>

<iframe id="ifAttach" style="display:none"></iframe>
<ul class="ztree" id="ulZTree"
    style="z-index:999;display:none;position:absolute;background-color:white;border:1px solid #72C3D9;height:200px;margin-top:0px;margin-left:0px;padding-left:0px;padding-top:5px;padding-bottom:5px;padding-right:0px;margin-right:0px;margin-bottom:0px;overflow: auto;"></ul>
<section class="content" id="app"  @click="hideZTree">
    <div  style="overflow: auto;">
        <table class="table-detail">
            <tr>
                <td class="td-title" style="width:20%;">姓名</td>
                <td style="width:60%;"><input type="text" v-model="user.name"/></td>
                <td v-if="pageType=='1'"></td>
            </tr>
            <tr>
                <td class="td-title">电话</td>
                <td><input type="text" v-model="user.tel" maxlength="11" @blur.stop="telTrim"/></td>
                <td v-if="pageType=='1'"></td>
            </tr>
            <tr>
                <td class="td-title">职位</td>
                <td><input style="float:left;width: 80%" type="text"
                           @click.stop="showZTree(user,$event)" @focus.stop="showZTree(user,$event)" v-model="user.roleName"/><a>
                </a></td>
                <td v-if="pageType=='1'">
                    <input  type="button" value="添加兼职" @click="addUserRole" class="btn oaBtn btn-xs"
                            style="width:60px;"/>
                </td>
            </tr>
            <tr v-for="(item,index) in user.userRoles">
                <td class="td-title">兼职</td>
                <td><input style="float:left;width: 80%" type="text"
                           @click.stop="showZTree(item,$event)" v-model="item.roleName" /><a>
                </a></td>
                <td v-if="pageType=='1'">
                    <input type="button" value="移除" @click="removeUserRole(index)" class="btn oaBtn btn-xs"
                           style="width:60px;"/>
                </td>
            </tr>
            <tr>
                <td class="td-title">上级</td>
                <td><input type="text" :value="user.parentName" id="txtParent" @blur="testParent"/></td>
                <td v-if="pageType=='1'"></td>
            </tr>
            <tr v-for="(item,index) in user.desc">
                <td class="td-title">描述</td>
                <td><input style="float:left;width: 80%" type="text"
                           v-model="item.description"/></td>
                <td v-if="pageType=='1'">
                    <input type="button" v-if="index==0"  value="添加描述" @click="addUserDesc" class="btn oaBtn btn-xs"
                           style="width:60px;"/>
                </td>
            </tr>
            <tr>
                <td class="td-title">附件</td>
                <td>
                    <div   id="divUploadedFiles">
                        <div v-for="(attach,i) in user.attaches" class="progressobj">
                            <input type="button" class="IcoNormal" style="float:left;"/>
                            <div class="filename" style="float:left;">
                                {{attach.name}}
                            </div>
                            <div class="delfile">
                                <a class="disableCss" v-on:click="deleteFile(i)">删除</a>
                                <a class="disableCss" v-on:click="download(attach.url,attach.name)">下载</a>
                            </div>
                        </div>
                    </div>
                </td>
                <td v-if="pageType=='1'">
                    <div id="divUpload">
                        添加附件
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div  style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;">
        <input type="button" value="保存"   @click="save()" class="btn oaBtn" style="margin-top:5px;">
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>

<script type="text/javascript">
    var zTreeCallback = {
        onClick: function (event, treeId, treeNode) {
            if (treeNode.type === "role") {
                roleGlobal.roleId = treeNode.dataId;
                roleGlobal.roleName = treeNode.name;
                $("#ulZTree").hide();
            }
        }
    };
    var zTreeSetting = {
        view: {
            showIcon: function (treeId,treeNode) {
                return treeNode.isParent;
            }
        },
        data: {
            simpleData: {
                enable: true
            },
            keep: {
                parent: true
            }
        },
        callback: {
            onClick: zTreeCallback.onClick
        }
    };
</script>
<script type="text/javascript">
    var roleGlobal = null;
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: '#app',
        data: {
            pageType:'1',
            user: {
                id: 0,
                name: '',
                tel: '',
                roleId: '',
                pwd: '111111',
                roleName: '',
                parentId: '',
                parentName: '',
                createUserId: getCurrentUser().id,
                updateUserId: getCurrentUser().id,
                attaches: [],
                userRoles: [],
                desc: [],
                entryDate: new Date().Format("yyyy-MM-dd")
            },
            treeObj: null,
            treeNodes: []
        },
        methods: {
            testParent:function () {
                var that = this;
                setTimeout(function () {
                    if(that.user.parentName != $("#txtParent").val()){
                        alert("请重新填写上级");
                        $("#txtParent").val(that.user.parentName);
                    }
                },300)

            },
            showZTree: function (role, e) {
                if(this.pageType == '2') return;
                roleGlobal = role;
                var $obj = $(e.target);
                var offset = $obj.offset();
                $("#ulZTree").css({
                    left: (offset.left - 1) + "px",
                    top: (offset.top + $obj.outerHeight() + 1) + "px",
                    width: ($obj.outerWidth() + 2) + "px"
                }).slideDown("fast");
            },
            hideZTree: function () {
                $("#ulZTree").hide();
            },
            telTrim:function(){
                this.user.tel=this.user.tel.replace(' ','');
            },
            deleteFile: function (i) {
                this.user.attaches.splice(i, 1);
            },
            download: function (attachId, fileName) {
                downloadFile(attachId,fileName)
                return false;
            },
            save: function () {
                var self = this

                if (self.user.name == "") {
                    alert("姓名不能为空");
                    return false;
                }
                if (self.user.tel == "") {
                    alert("手机号不能为空");
                    return false;
                }
                if (!(/^1[34578]\d{9}$/.test(self.user.tel))) {
                    alert("手机号格式不正确");
                    return false;
                }
                if (self.user.roleName=="") {
                    alert("请选择职位");
                    return false;
                }
                if(self.user.userRoles.length!=0){
                    console.log(self.user.userRoles)
                    for (var i = 0; i < self.user.userRoles.length; i++) {
                        if (self.user.userRoles[i].roleName == "") {
                            alert("兼职不能为空，请添加或删除");
                            return false;
                        }
                    }
                }
//                if (self.user.userRoles=="") {
//                    alert("请选择职位");
//                    return;
//                }

                if (self.user.id == "0") {
                    $.wyui.postMethod(urlConfig.system.user.getUserByTel, {tel: self.user.tel}, function (r) {
                        console.log(r.isTel);
                        if (r.isTel) {
                            alert("手机号已经存在，请重新输入！")
                        } else {
                            $.wyui.postMethod(urlConfig.system.user.saveUser, self.user, function (r) {
                                alert("保存成功");
                                parent.refresh();
                                api.close();
                            });
                        }
                    });
                } else {
                    $.wyui.postMethod(urlConfig.system.user.saveUser, self.user, function (r) {
                        alert("保存成功");
                        parent.refresh();
                        api.close();
                    });
                }


            },
            //兼职添加一行
            addUserRole: function () {
                this.user.userRoles.push({roleId: '', roleName: '', userId: 0});
            },
            //兼职删除一行
            removeUserRole: function (index) {
                this.user.userRoles.splice(index, 1);
            },
            //描述添加一行
            addUserDesc: function () {
                this.user.desc.push({description: '', userId: 0});
            }
        },
        mounted: function () {
            var that = this;
            $.wyui.postMethod(urlConfig.system.system.getOrgTreeNodesByUserId, {userId: getCurrentUser().id}, function (nodes) {
                that.treeObj = $.fn.zTree.init($("#ulZTree"), zTreeSetting, nodes);
            });
            if ($.wyui.page.urlParams.userId) {
                $.wyui.postMethod(urlConfig.system.user.getUserViewById, {id: $.wyui.page.urlParams.userId}, function (user) {
                    commonService.getAttachesByModuleId({moduleId: $.wyui.page.urlParams.userId}, function (attaches) {
                        $.wyui.postMethod(urlConfig.system.user2Role.getRolesByUserId, {userId: $.wyui.page.urlParams.userId}, function (userRoles) {
                            $.wyui.postMethod(urlConfig.system.user.getUserDescByUserId, {userId: $.wyui.page.urlParams.userId}, function (descriptions) {
                                user.userRoles = [];
                                if (user.userRoles) {
                                    for (var i = 0; i < userRoles.length; i++) {
                                        user.userRoles.push({
                                            roleId: userRoles[i].id,
                                            roleName: userRoles[i].roleName,
                                            userId: 0
                                        });

                                    }
                                }
                                if (attaches) {
                                    user.attaches = attaches;
                                }
                                user.desc = [];
                                if (descriptions && descriptions.length > 0) {
                                    user.desc = descriptions;
                                } else {
                                    user.desc.push({
                                        description: '',
                                        userId: 0,
                                        id:0
                                    })
                                }
                                that.user = user;
                                console.log(that.user);
                            });
                        });
                    });
                });
            }
            this.pageType = $.wyui.page.urlParams.type;
            /*if ($.wyui.page.urlParams.type == "2") {
                setTimeout(function () {
                    $(":text,textarea").attr("readOnly", "true");
                },500);
            }*/

            this.uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                // 文件接收服务端。
                server: server.fjIp + "/attach/uploadFile.json",
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#divUpload',
                duplicate: true
            });

            this.uploader.on("uploadStart", function () {
                $("#progress").show();
            });
            this.uploader.on("uploadComplete", function () {
                $("#progress").hide();
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            this.uploader.on('uploadSuccess', function (file, response) {

                that.user.attaches.push({id: response.id, name: response.name, url: response.url});
            });

            // 文件上传失败，显示上传出错。
            this.uploader.on('uploadError', function (file) {
                alert("上传失败！");
            });
        }
    });

    $(function () {
        $("#txtParent").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                console.log(user);
                app.user.parentId = user.id;
                app.user.parentName = user.name;
                return false;
            },
            height: 210,
            width: 300
        });
    });
</script>
</body>
</html>
